<template>
  <div class="device-container" v-if="deviceConfigList.length">
    <div class="parkinglot-device-top">
      <div class="parkinglog-name">{{ $route.query.parkName }}</div>
      <div class="ip-mode" v-if="parkConfigInfo && isPermmited('PARK:CONFIG:MANAGE:DEVICE:UPDATE')">
        IP获取模式
        <el-switch
          :active-text="`${curIpType}`"
          inactive-text
          :active-value="0"
          :inactive-value="1"
          v-model="parkConfigInfo.parkCloudDetailVo.deviceModel"
          @change="changeDeviceIpMode"
        ></el-switch>
      </div>
    </div>
    <div class="device-bd">
      <div class="device-item" v-for="(item, index) in deviceConfigList">
        <div class="top-main-info" @click="item.uiOpt.isShowDetail = !item.uiOpt.isShowDetail">
          <div class="info-item">{{ item.channelConfigVo.entranceName }}</div>
          <div class="info-item">{{ item.channelConfigVo.customCode }}</div>
          <div class="device-top-tabs">
            <div class="tab-item" v-if="item.ytjDeviceVo !== null">
              <img
                src="../../../../../assets//img/ic_open_success.svg"
                alt
                v-if="item.ytjDeviceVo.status === 1 || item.ytjDeviceVo.assistStatus === 1"
              />

              <img
                src="../../../../../assets//img/ic_warning.svg"
                alt
                v-if="item.ytjDeviceVo.status === 0 && item.ytjDeviceVo.assistStatus === 0"
              />
              一体机
            </div>
            <div class="tab-item" v-if="item.boxDeviceVo !== null">
              <img
                src="../../../../../assets//img/ic_open_success.svg"
                alt
                v-if="item.boxDeviceVo.status === 1 || item.boxDeviceVo.assistStatus === 1"
              />

              <img
                src="../../../../../assets//img/ic_warning.svg"
                alt
                v-if="item.boxDeviceVo.status === 0 && item.boxDeviceVo.assistStatus === 0"
              />
              转接盒子
            </div>
            <div
              class="tab-item"
              v-if="item.cameraConfigVoList !== null"
              v-for="(cameraItem, index) in item.cameraConfigVoList"
            >
              <img src="../../../../../assets//img/ic_open_success.svg" alt v-if="cameraItem.status === 1" />

              <img src="../../../../../assets//img/ic_warning.svg" alt v-if="cameraItem.status === 0" />
              摄像枪
              <template v-if="item.cameraConfigVoList.length > 1">{{ index + 1 }}</template>
            </div>
          </div>
          <div
            class="device-backend-wrap"
            v-if="isPermmited('PARK:CONFIG:MANAGE:CONFIG:LIST') && item.ytjDeviceVo != null"
          >
            <span @click="toDeviceBackend(item.channelConfigVo.parkGlobalID, item.ytjDeviceVo.ytj_id)"
              >进入设备后台</span
            >
          </div>
          <div class="show-detail" v-if="item.ytjDeviceVo || item.boxDeviceVo || item.cameraConfigVoList">
            <i class="el-icon-caret-bottom" :class="{ rotate180: item.uiOpt.isShowDetail }"></i>
          </div>
        </div>

        <div
          class="device-item-bd"
          v-if="item.uiOpt.isShowDetail && (item.ytjDeviceVo || item.boxDeviceVo || item.cameraConfigVoList)"
        >
          <div class="device-change-tips" v-if="item.changeFlag && !item.deviceExceptionStatus">
            <i class="el-icon-warning"></i> 设备信息已更新，请保存
          </div>
          <div class="device-change-tips" v-if="item.deviceExceptionStatus">获取不到设备信息，请检查网络连接</div>

          <div class="device-item-bd-items">
            <div class="device-item-bd-item" v-if="item.ytjDeviceVo !== null">
              <div class="top-title">
                一体机 (
                <span v-if="item.ytjDeviceVo.status === 1 || item.ytjDeviceVo.assistStatus === 1">正常</span>
                <span v-if="item.ytjDeviceVo.status === 0 && item.ytjDeviceVo.assistStatus === 0">断线</span>)
              </div>
              <div class="item-bd">
                <el-form label-position="left" label-width="98px" class="device-form" size="small">
                  <template
                    v-if="
                      !item.uiOpt.isEdit || (item.uiOpt.isEdit && parkConfigInfo.parkCloudDetailVo.deviceModel === 0)
                    "
                  >
                    <el-form-item label="设备名称" label-width="68px">{{ item.ytjDeviceVo.ytj_name }}</el-form-item>
                    <el-form-item label="IP" label-width="68px" :class="{ error: item.ytjDeviceVo.ipChangeFlag }">{{
                      item.ytjDeviceVo.ip
                    }}</el-form-item>
                  </template>

                  <template v-if="item.uiOpt.isEdit && parkConfigInfo.parkCloudDetailVo.deviceModel === 1">
                    <el-form-item label="设备名称" label-width="68px">
                      <el-input placeholder="设备名称" v-model="item.ytjDeviceVo.ytj_name"></el-input>
                    </el-form-item>
                    <el-form-item label="IP" label-width="68px">
                      <el-input placeholder="IP" v-model="item.ytjDeviceVo.ip"></el-input>
                    </el-form-item>
                  </template>

                  <el-form-item label="设备ID" label-width="54px">{{ item.ytjDeviceVo.ytj_id }}</el-form-item>
                  <el-form-item label="移动网络状态" :class="{ error: item.ytjDeviceVo.status === 0 }">{{
                    item.ytjDeviceVo.assistStatus === 1 ? '正常' : '断线'
                  }}</el-form-item>
                  <el-form-item label="有线网络状态" :class="{ error: item.ytjDeviceVo.status === 0 }">{{
                    item.ytjDeviceVo.status === 1 ? '正常' : '断线'
                  }}</el-form-item>
                  <el-form-item label="IP设置">{{
                    parkConfigInfo.parkCloudDetailVo.deviceModel === 0 ? '自动获取' : '手动设置'
                  }}</el-form-item>
                </el-form>
              </div>
            </div>

            <div class="device-item-bd-item" v-if="item.boxDeviceVo !== null">
              <div class="top-title">
                转接盒子(
                <span v-if="item.boxDeviceVo.status === 1 || item.boxDeviceVo.assistStatus === 1">正常</span>
                <span v-if="item.boxDeviceVo.status === 0 && item.boxDeviceVo.assistStatus === 0">断线</span>)
              </div>
              <div class="item-bd">
                <el-form label-position="left" label-width="98px" class="device-form" size="small">
                  <template
                    v-if="
                      !item.uiOpt.isEdit || (item.uiOpt.isEdit && parkConfigInfo.parkCloudDetailVo.deviceModel === 0)
                    "
                  >
                    <el-form-item label="设备名称" label-width="68px">{{ item.boxDeviceVo.boxName }}</el-form-item>
                    <el-form-item label="IP" label-width="68px" :class="{ error: item.boxDeviceVo.ipChangeFlag }">{{
                      item.boxDeviceVo.ip
                    }}</el-form-item>
                  </template>

                  <template v-if="item.uiOpt.isEdit && parkConfigInfo.parkCloudDetailVo.deviceModel === 1">
                    <el-form-item label="设备名称" label-width="68px">
                      <el-input placeholder="设备名称" v-model="item.boxDeviceVo.boxName"></el-input>
                    </el-form-item>
                    <el-form-item label="IP" label-width="68px">
                      <el-input placeholder="IP" v-model="item.boxDeviceVo.ip"></el-input>
                    </el-form-item>
                  </template>

                  <el-form-item label="设备ID" label-width="54px">{{ item.boxDeviceVo.boxId }}</el-form-item>
                  <el-form-item label="移动网络状态" :class="{ error: item.ytjDeviceVo.status === 0 }">{{
                    item.ytjDeviceVo.assistStatus === 1 ? '正常' : '断线'
                  }}</el-form-item>
                  <el-form-item label="有线网络状态" :class="{ error: item.ytjDeviceVo.status === 0 }">{{
                    item.ytjDeviceVo.status === 1 ? '正常' : '断线'
                  }}</el-form-item>
                  <el-form-item label="IP设置">{{
                    parkConfigInfo.parkCloudDetailVo.deviceModel === 0 ? '自动获取' : '手动设置'
                  }}</el-form-item>
                </el-form>
              </div>
            </div>

            <div
              class="device-item-bd-item"
              v-if="item.cameraConfigVoList !== null"
              v-for="(cameraItem, cameraIndex) in item.cameraConfigVoList"
            >
              <div class="top-title">
                摄像枪
                <template v-if="item.cameraConfigVoList.length > 1">{{ cameraIndex + 1 }}</template
                >(
                <span v-if="cameraItem.status === 1">正常</span>
                <span v-if="cameraItem.status === 0">断线</span>)
              </div>
              <div class="item-bd">
                <el-form label-position="left" label-width="98px" class="device-form" size="small">
                  <template
                    v-if="
                      !item.uiOpt.isEdit || (item.uiOpt.isEdit && parkConfigInfo.parkCloudDetailVo.deviceModel === 0)
                    "
                  >
                    <el-form-item label="设备名称" label-width="68px">{{ cameraItem.cameraName }}</el-form-item>
                    <el-form-item label="IP" label-width="68px" :class="{ error: cameraItem.ipChangeFlag }">{{
                      cameraItem.cameraIp
                    }}</el-form-item>
                  </template>

                  <template v-if="item.uiOpt.isEdit && parkConfigInfo.parkCloudDetailVo.deviceModel === 1">
                    <el-form-item label="设备名称" label-width="68px">
                      <el-input placeholder="设备名称" v-model="cameraItem.cameraName"></el-input>
                    </el-form-item>
                    <el-form-item label="IP" label-width="68px">
                      <el-input placeholder="IP" v-model="cameraItem.cameraIp"></el-input>
                    </el-form-item>
                  </template>

                  <el-form-item label="设备ID" label-width="54px">{{ cameraItem.cameraID }}</el-form-item>
                  <el-form-item label="有线网络状态" :class="{ error: cameraItem.status === 0 }">{{
                    cameraItem.status === 1 ? '正常' : '断线'
                  }}</el-form-item>
                  <el-form-item label="IP设置">{{
                    parkConfigInfo.parkCloudDetailVo.deviceModel === 0 ? '自动获取' : '手动设置'
                  }}</el-form-item>
                </el-form>
              </div>
            </div>
          </div>

          <div class="action" v-if="!item.uiOpt.isEdit && isPermmited('PARK:CONFIG:MANAGE:DEVICE:UPDATE')">
            <el-button type="text" @click="editDeviceItem(item)">编辑</el-button>
            <el-button type="text" class="del-icon" @click="delDevice(item, index)">删除</el-button>
          </div>

          <div class="action isEditing" v-if="item.uiOpt.isEdit">
            <el-button type="primary" size="medium" @click="changeDeviceItem(item)">保存</el-button>
            <el-button type="primary" size="medium" plain @click="cancelEdit(deviceConfigList, index)">取消</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pageScript from './index.js';
export default pageScript;
</script>

<style lang="less" scoped>
@import './index.less';
</style>
